useSelectPaymentModal

Hook para abrir el modal de selección de pago

Importar

import { useSelectPaymentModal } from '@0xsequence/checkout'

Uso

import { useSelectPaymentModal } from '@0xsequence/checkout'
import { encodeFunctionData, toHex } from 'viem'
import { useAccount } from 'wagmi'

function App() {
  const { address } = useAccount()
  const { openSelectPaymentModal } = useSelectPaymentModal()
  
  const handleCheckout = () => {
    if (!address) return
    
    // ERC-20 payment settings
    const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359' // USDC on Polygon
    const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
    const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
    const price = '20000' // Price in smallest unit (0.02 USDC)
    const chainId = 137 // Polygon
    
    // NFT details
    const collectibles = [
      {
        tokenId: '1',
        quantity: '1'
      }
    ]
    
    // Transaction data for the ERC-1155 mint function
    const purchaseTransactionData = encodeFunctionData({
      abi: ERC_1155_SALE_CONTRACT, // Your contract ABI
      functionName: 'mint',
      args: [
        address,
        collectibles.map(c => BigInt(c.tokenId)),
        collectibles.map(c => BigInt(c.quantity)),
        toHex(0),
        currencyAddress,
        price,
        [toHex(0, { size: 32 })]
      ]
    })
    
    // Open the payment selection modal
    openSelectPaymentModal({
      collectibles,
      chain: chainId,
      price,
      targetContractAddress: salesContractAddress,
      recipientAddress: address,
      currencyAddress,
      collectionAddress,
      creditCardProviders: ['sardine', 'transak'],
      transakConfig: {
        contractId: 'your-contract-id',
        apiKey: 'your-api-key'
      },
      copyrightText: 'ⓒ2024 Your Company',
      onSuccess: (txnHash: string) => {
        console.log('success!', txnHash)
      },
      onError: (error: Error) => {
        console.error(error)
      },
      onClose: () => {
        console.log('modal closed!')
      },
      txData: purchaseTransactionData
    })
  }
  
  return (
    <button onClick={handleCheckout}>
      Buy NFT with multiple payment options
    </button>
  )
}

Tipo de retorno: UseSelectPaymentModalReturnType

El hook retorna un objeto con las siguientes propiedades:

type UseSelectPaymentModalReturnType = {
  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
  closeSelectPaymentModal: () => void
  selectPaymentSettings: SelectPaymentSettings | undefined
}

Propiedades

openSelectPaymentModal

(settings: SelectPaymentSettings) => void

Función para abrir el modal de Selección de Pago con la configuración especificada.

Parámetros:

El objeto settings puede incluir las siguientes propiedades:

Parámetro	Type	Description
collectibles	Array<{tokenId: string, quantity: string}>	Lista de coleccionables a comprar
chain	number	ID de la red blockchain
price	string	Precio en la unidad más pequeña de la moneda
targetContractAddress	string	Dirección del contrato con el que interactuar
recipientAddress	string	Dirección que recibirá los artículos comprados
currencyAddress	string	Dirección del contrato del token de la moneda
collectionAddress	string	Dirección del contrato de la colección NFT
creditCardProviders	string[]	Lista de proveedores de tarjeta de crédito soportados (por ejemplo, ‘sardine’, ‘transak’)
transakConfig	object	Configuración para la integración con Transak
copyrightText	string	Texto de derechos de autor para mostrar en el modal
onSuccess	(txnHash: string) => void	Callback cuando la transacción es exitosa
onError	(error: Error) => void	Callback cuando ocurre un error
onClose	() => void	Callback cuando se cierra el modal
txData	string	Datos de transacción codificados para la compra

closeSelectPaymentModal

() => void

Función para cerrar el modal de Selección de Pago.

selectPaymentSettings

SelectPaymentSettings | undefined

La configuración actual para el modal de Selección de Pago.

Notas

Este hook proporciona métodos para controlar el modal de Selección de Pago, que permite a los usuarios comprar activos digitales con múltiples opciones de pago. El modal ofrece varios métodos de pago, incluyendo:

• Pagar con criptomonedas desde la wallet del usuario
• Intercambiar tokens para pagar con otra criptomoneda
• Pagar con tarjeta de crédito/débito
• Recibir fondos desde otra wallet